<!-- 商品列表 -->
<template>
	<view class="list-box">
    <view class="linear-bg">
      <view :style="{ height: statusBarHeight + 'px' }"></view>
      <view style="height: 165rpx">
        <view class="navBarTit">
          <view class="uicon-nav-back u-iconfont" @tap="goBack1"></view>
          <text class="title">新品推荐</text>
        </view>
        <view class="search-box">
          <text class="uicon-search u-iconfont"></text>
          <input placeholder="搜索新品推荐商品"></input>
          <text class="text">搜索</text>
        </view>
      </view>
    </view>
    <view :style="{ height: statusBarHeight + 'px' }"></view>
    <view style="height: 165rpx;"></view>
    <view style="height: 30rpx;"></view>

    <view class="collect-list" v-if="!isEmpty">
      <view class="goods-box u-flex u-col-top" v-for="f in goodsList" :key="f.id" @tap="$Router.push({ path: '/pages/goods/detail', query: { id: f.id } })">
        <image class="goods_img"  lazy-load fade-show :src="f.image" mode="aspectFill"></image>
        <view class="u-m-l-20" style="flex-grow: 1;width: 1rpx;">
          <view class="goods-title u-ellipsis-2 u-m-b-10">{{ f.title }}</view>
          <view v-if="f.subtitle" class="describe-text u-m-b-10 u-ellipsis-1">{{ f.subtitle }}</view>
          <view class="u-flex u-row-between u-col-center u-m-t-20">
            <view class="u-flex u-col-bottom">
              <view class="price u-m-r-10">{{ f.price }}</view>
            </view>
            <view class="remove">立即抢购</view>
          </view>
        </view>
      </view>
    </view>

		<!-- 缺省页 -->
		<shopro-empty v-if="isEmpty" :image="$IMG_URL + '/imgs/empty/empty_goods.png'" tipText="暂无该商品，还有更多好货等着你噢~"></shopro-empty>
		<!-- 加载更多 -->
		<u-loadmore v-show="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
		<!-- 登录弹窗 -->
		<shopro-auth-modal></shopro-auth-modal>
	</view>
</template>

<script>
import shFilter from './components/sh-filter.vue';
import { mapMutations, mapActions, mapState } from 'vuex';
let systemInfo = uni.getSystemInfoSync();
let historyTag = uni.getStorageSync('searchHistoryArr') ? JSON.parse(uni.getStorageSync('searchHistoryArr')) : [];
export default {
	components: {
		shFilter
	},
	data() {
		return {
      statusBarHeight: systemInfo.statusBarHeight,
			isEmpty: false,
			goodsList: [],
			searchVal: '',
			listParams: {
				category_id: 0,
				keywords: '',
				page: 1
			},
			loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			lastPage: 1,

			// 瀑布流 350-330
			addTime: 100, //排序间隙时间
			leftHeight: 0,
			rightHeight: 0,
			leftList: [],
			rightList: [],
			tempList: []
		};
	},
	// 触底加载更多
	onReachBottom() {
		if (this.listParams.page < this.lastPage) {
			this.listParams.page += 1;
			this.getGoodsList();
		}
	},
	onLoad() {
    // let top = 0;
    // // #ifdef MP-WEIXIN
    // let buttonBound = wx.getMenuButtonBoundingClientRect();
    // top = buttonBound.top + buttonBound.height;
    // // #endif
    // this.navBtnTop = top;

		if (this.$Route.query.id) {
			this.listParams.category_id = this.$Route.query.id;
			this.getGoodsList();
		} else if (this.$Route.query.hasOwnProperty('keywords')) {
			this.listParams.keywords = this.$Route.query.keywords;
			this.searchVal = this.$Route.query.keywords;
			!this.$Route.query.keywords && this.getGoodsList();
		} else {
			this.getGoodsList();
		}
	},
	methods: {
		// 瀑布流相关
		async splitData() {
			if (!this.tempList.length) return;
			let item = this.tempList[0];
			if (!item) return;

			// 分左右
			if (this.leftHeight < this.rightHeight) {
				this.leftHeight += item.activity_discounts_tags.length ? 350 : 330;
				this.leftList.push(item);
			} else if (this.leftHeight > this.rightHeight) {
				this.rightHeight += item.activity_discounts_tags.length ? 350 : 330;
				this.rightList.push(item);
			} else {
				this.leftHeight += item.activity_discounts_tags.length ? 350 : 330;
				this.leftList.push(item);
			}

			// 移除临时列表的第一项，如果临时数组还有数据，继续循环
			this.tempList.splice(0, 1);
			if (this.tempList.length) {
				setTimeout(() => {
					this.splitData();
				}, this.addTime);
			}
		},
		clear() {
			this.leftList = [];
			this.rightList = [];
			this.leftHeight = 0;
			this.rightHeight = 0;
			this.tempList = [];
		},

		onFilter(e) {
			this.listParams.order = e;
			this.goodsList = [];
			this.listParams.page = 1;
			this.lastPage = 1;
			this.clear();
			this.$u.debounce(this.getGoodsList);
		},
		// 键盘搜索,输入搜索
		onSearch() {
			this.goodsList = [];
			this.listParams.page = 1;
			this.lastPage = 1;
			this.listParams.keywords = this.searchVal;
			this.clear();
			this.$u.debounce(this.getGoodsList);
		},

		// 队列
		getArr(list, item) {
			let arr = list;
			let length = 10; //队列长度
			arr.length < length ? arr.unshift(item) : arr.pop();
			return arr;
		},

		// 清除搜索框
		clearSearch() {
			this.searchVal = '';
			this.clear();
		},
		// 商品列表
		getGoodsList() {
			let that = this;
			that.loadStatus = 'loading';
			that.$http('goods.lists', that.listParams, '加载中...').then(res => {
				if (this.searchVal && !historyTag.includes(this.searchVal)) {
					let searchHistoryArr = JSON.stringify(this.getArr(historyTag, this.searchVal));
					uni.setStorageSync('searchHistoryArr', searchHistoryArr);
				}
				if (res.code === 1) {
					that.goodsList = [...that.goodsList, ...res.data.data];
					that.isEmpty = !that.goodsList.length;
					that.lastPage = res.data.last_page;
					that.loadStatus = that.listParams.page < res.data.last_page ? 'loadmore' : 'nomore';
					that.tempList = res.data.data;
					that.splitData();
				}
			});
		},
    goBack1() {
      uni.navigateBack();
    }
	}
};
</script>

<style lang="scss">
@mixin vue-flex($direction: row) {
	/* #ifndef APP-NVUE */
	display: flex;
	flex-direction: $direction;
	/* #endif */
}
.u-waterfall {
	@include vue-flex;
	flex-direction: row;
	align-items: flex-start;
}

.u-column {
	@include vue-flex;
	flex: 1;
	flex-direction: column;
	height: auto;
}
.linear-bg{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  background-color: #fae8dc;
  background-image: url('https://yz-mrzq.oss-cn-shenzhen.aliyuncs.com/imgs/other/news-goods.png');
  background-size: 100% 100%;
  .navBarTit{
    font-size: 36rpx;
    text-align: center;
    position: relative;
    color: #eb7602;
    padding-top: 30rpx;
    .title{
      font-size: 28rpx;
      font-weight: bold;
      display: block;
    }
    .u-iconfont {
      position: absolute;
      left: 20rpx;
      font-size: 50rpx;
      top: -15rpx;
      display: block;
      width: 80rpx;
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      margin-top: 30rpx;
    }
  }
  .search-box{
    background: #fff;
    border-radius: 30rpx;
    padding: 4rpx 10rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 36rpx 80rpx 0 80rpx;
    .u-iconfont{
      font-size: 30rpx;
      color: #cbcbcb;
      margin-left: 10rpx;
    }
    input{
      flex-grow: 1;
      background: #fff;
      font-size: 22rpx;
      padding-left: 20rpx;
      position: relative;
      top: 3rpx;
    }
    .text{
      font-size: 24rpx;
      color: #eb7602;
      display: flex;
      align-items: center;
      margin-right: 10rpx;
      &:before{
        content: '';
        display: block;
        width: 2rpx;
        height: 30rpx;
        background: #eb7602;
        margin-right: 10rpx;
      }
    }
  }
}

.collect-list {
  width: 100%;
  margin-bottom: 30rpx;
  padding: 30rpx;
}

.goods-box {
  background: linear-gradient(to bottom,#fae9dd,#fff);
  position: relative;
  margin-bottom: 20rpx;
  padding: 20rpx;
  box-sizing: border-box;
  border-radius: 10rpx;
  .goods_img{
    width: 200rpx;
    height: 200rpx;
    border-radius: 6rpx;
    margin: 10rpx;
  }
  .goods-title {
    font-size: 30rpx;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    line-height: 40rpx;
    margin-top: 10rpx;
  }

  .describe-text {
    font-size: 22rpx;
    color: #ffa649;
  }

  .price {
    color: #333333;
    font-weight: 600;
    margin-left: 20rpx;
    &::before {
      content: '￥';
      font-size: 20rpx;
      margin-right: 10rpx;
    }
  }
  .remove{
    background: #383838;
    color: $u-type-warning;
    padding: 3rpx 30rpx;
    font-size: 20rpx;
    border-radius: 20rpx;
  }
}

</style>
